<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="../framework/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/index.css">
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const header = document.querySelector('.header');
            const search = document.querySelector('.search');
            const headerAndSearch = document.createElement('div');

            // 创建一个新的容器来包裹header和search
            headerAndSearch.className = 'header-search-container';
            header.parentNode.insertBefore(headerAndSearch, header);
            headerAndSearch.appendChild(header);
            headerAndSearch.appendChild(search);

            // 获取初始位置和高度
            const originalTop = headerAndSearch.getBoundingClientRect().top + window.scrollY;
            const headerAndSearchHeight = headerAndSearch.offsetHeight;

            // 创建一个占位符元素并立即设置其高度
            const placeholder = document.createElement('div');
            placeholder.style.height = headerAndSearchHeight + 'px';
            placeholder.style.display = 'none';
            headerAndSearch.parentNode.insertBefore(placeholder, headerAndSearch);

            function updateFixedState() {
                const scrollPosition = window.pageYOffset;

                if (scrollPosition >= originalTop) {
                    if (!headerAndSearch.classList.contains('fixed')) {
                        headerAndSearch.classList.add('fixed');
                        placeholder.style.display = 'block';
                    }
                } else {
                    headerAndSearch.classList.remove('fixed');
                    placeholder.style.display = 'none';
                }
            }

            // 初始调用一次以设置正确的初始状态
            updateFixedState();

            // 使用 requestAnimationFrame 以确保滚动事件更平滑
            window.addEventListener('scroll', function() {
                window.requestAnimationFrame(updateFixedState);
            });
        });
    </script>
    <script src="payment.js"></script>
    <title>首页</title>
</head>
<body>
<!--总容器-->
<div class="wrapper">
    <!--header-->
    <div class="header" >
        <div class="location-icon">
            <i class="fa fa-map-marker" style="font-size: 3.5vw;"></i>
        </div>
        <div class="location-text">
            昆明<i class="fa fa-angle-down" aria-hidden="true"></i>
        </div>

    </div>

    <!--search部分-->
    <div class="search" id="fixedBox">
        <div class="search-fixed-top">
            <div class="search-box">
                <i class="fa fa-search"></i>
               附近的酒店
                <div class="search-button">搜索</div>
            </div>

         <img src="../img/Snipaste_2024-07-06_23-16-43.png" height="106" width="110"/>
        </div>
    </div>
<!--  功能分类部分  -->
    <ul class="type">
        <li onclick="location.href='business-List.html'">
        <img src="../img/Snipaste_2024-07-06_23-05-07.png" height="123" width="154"/>
            <p>外卖</p>
        </li>
        <li onclick="location.href='business-List.html'">
           <img src="../img/Snipaste_2024-07-06_23-05-15.png" height="127" width="142"/>
            <p>超市遍历</p>
        </li>
        <li><img src="../img/Snipaste_2024-07-06_23-05-23.png" height="127" width="175"/>
            <p>酒店民宿</p>
        </li>
        <li onclick="location.href='business-List.html'"><img src="../img/Snipaste_2024-07-06_23-05-31.png" height="111" width="138"/>
            <p>休闲娱乐</p>
        </li>
        <li><img src="../img/Snipaste_2024-07-06_23-05-37.png" height="113" width="134"/>
            <p>看病买药</p>
        </li>
        <li onclick="location.href='business-List.html'"><img src="../img/Snipaste_2024-07-06_23-05-44.png" height="108" width="123"/>
            <p>团购</p>
        </li>
        <li onclick="location.href='business-List.html'"><img src="../img/Snipaste_2024-07-06_23-05-54.png" height="102" width="150"/>
            <p>美食</p>
        </li >
        <li onclick="location.href='business-List.html'"><img src="../img/Snipaste_2024-07-06_23-06-01.png" height="111" width="135"/>
            <p>蔬菜水果</p>
        </li>
        <li><img src="../img/Snipaste_2024-07-06_23-06-07.png" height="142" width="193"/>
            <p>景点游玩</p>
        </li>
        <li><img src="../img/Snipaste_2024-07-06_23-06-23.png" height="115" width="112"/>
            <p>电影演出</p>
        </li>
        <li onclick="location.href='business-List.html'"><img src="../img/Snipaste_2024-07-06_23-06-30.png" height="109" width="113"/>
            <p>美团优选</p>
        </li>
        <li><img src="../img/Snipaste_2024-07-06_23-06-36.png" height="119" width="123"/>
            <p>民宿公寓</p>
        </li>
        <li><img src="../img/Snipaste_2024-07-06_23-06-43.png" height="123" width="143"/>
            <p>丽人美发</p>
        </li>
        <li><img src="../img/Snipaste_2024-07-06_23-06-49.png" height="115" width="138"/>
            <p>免费水果</p>
        </li>
        <li><img src="../img/Snipaste_2024-07-06_23-06-55.png" height="108" width="147"/>
            <p>火车票机票</p>
        </li>
    </ul>
<!--  福利领取部分  -->
    <div class="welfare">
        <div class="notification-banner">
            <div class="notification-icon">
                <img src="../img/Snipaste_2024-07-08_18-47-04.png" height="59" width="47"/>
            </div>
            <div class="notification-text">1个新人福利待领取</div>
            <div class="notification-number">1</div>
            <a href="">></a>
        </div>
    </div>

<!--    横幅广告部分   -->
    <div class="banner">
        <div class="header-box">
            <h3>新人专享</h3>
            <p>全场0元起</p>
            <a href="">更多 &gt;</a>
        </div>
        <ul class="product">
            <li><img src="../img/Snipaste_2024-07-08_10-42-24.png" height="264" width="232"/>

            </li>
            <li><img src="../img/Snipaste_2024-07-08_10-40-50.png" height="154" width="223"/>
                <div class="product-name">宝迪妮黑胶晴雨伞</div>
                <div class="product-price">
                    <h3>¥</h3>
                    <p>0</p>
                    <h4>新人价</h4>
                </div>
            </li>
            <li><img src="../img/Snipaste_2024-07-08_10-41-04.png" height="159" width="228"/>
                <div class="product-name">运动蓝牙挂脖耳机</div>
                <div class="product-price">
                    <h3>¥</h3>
                    <p>0</p>
                    <h4>新人价</h4>
                </div>
            </li>
            <li><img src="../img/Snipaste_2024-07-08_10-41-20.png" height="161" width="230"/>
                <div class="product-name">25包 便携式抽纸</div>
                <div class="product-price">
                    <h3>¥</h3>
                    <p>0</p>
                    <h4>新人价</h4>
                </div>
            </li>
            <li><img src="../img/Snipaste_2024-07-08_10-41-34.png" height="166" width="233"/>
                <div class="product-name">3袋正宗螺蛳粉</div>
                <div class="product-price">
                    <h3>¥</h3>
                    <p>0</p>
                    <h4>新人价</h4>
                </div>
            </li>
            <li><img src="../img/Snipaste_2024-07-08_10-41-43.png" height="159" width="220"/>
                <div class="product-name">5袋 超辣火鸡面</div>
                <div class="product-price">
                    <h3>¥</h3>
                    <p>0</p>
                    <h4>新人价</h4>
                </div>
            </li>
            <li><img src="../img/Snipaste_2024-07-08_10-41-53.png" height="161" width="244"/>
                <div class="product-name">大容量运动水杯</div>
                <div class="product-price">
                    <h3>¥</h3>
                    <p>0</p>
                    <h4>新人价</h4>
                </div>
            </li>
            <li><img src="../img/Snipaste_2024-07-08_10-42-01.png" height="152" width="229"/>
                <div class="product-name">8瓶 雪碧</div>
                <div class="product-price">
                    <h3>¥</h3>
                    <p>0</p>
                    <h4>新人价</h4>
                </div>
            </li>
            <li><img src="../img/Snipaste_2024-07-08_10-42-15.png" height="158" width="232"/>
                <div class="product-name">5寸USB小风扇</div>
                <div class="product-price">
                    <h3>¥</h3>
                    <p>0</p>
                    <h4>新人价</h4>
                </div>
            </li>
        </ul>

    </div>
<!--    推荐商家部分-->
    <ul class="recommand">
    <li class="product-item">
        <div class="product-image">
            <img src="../img/Snipaste_2024-07-08_15-25-32.png" height="205" width="349"/>
            <span class="badge">到店吃</span>
        </div>
        <div class="product-info">
            <h3 class="product-title">秘制鸡爪</h3>
            <p class="product-description">爪尚星秘制泡鸡脚（大润发...</p>
            <div class="product-meta">
                <span class="sales-info">半年售900+ |</span>
                <span class="rating">4.2分</span>
            </div>
            <div class="product-price">
                <span class="current-price">¥0</span>
                <s class="original-price">4</s>
                <span class="price-tag">APP新客</span>
            </div>
        </div>
    </li>
        <li class="product-item">
            <div class="product-image">
                <img src="../img/Snipaste_2024-07-08_15-26-11.png" height="205" width="340"/>
                <span class="badge">包邮</span>
            </div>
            <div class="product-info">
                <h3 class="product-title">扫把套装家用折叠扫帚簸箕组合套装软毛刷笤帚...</h3>
                <p class="product-description">幸允厨具旗舰店</p>
                <div class="product-meta">
                    <span class="sales-info">已售5000+ |包邮到家|</span>
                    <span class="rating">4.4分</span>
                </div>
                <div class="product-price">
                    <span class="current-price">¥6</span>
                    <s class="original-price">17</s>
                    <span class="price-tag">APP新客</span>
                </div>
            </div>
        </li>
        <li class="product-item">
            <div class="product-image">
                <img src="../img/Snipaste_2024-07-08_15-26-30.png" height="143" width="244"/>
                <span class="badge">包邮</span>
            </div>
            <div class="product-info">
                <h3 class="product-title">挂脖风扇</h3>
                <p class="product-description">包邮到家</p>
                <div class="product-meta">
                    <span class="sales-info">半年售900+ |</span>
                    <span class="rating">4.2分</span>
                </div>
                <div class="product-price">
                    <span class="current-price">¥0.01</span>
                    <s class="original-price">19.19</s>
                    <span class="price-tag">APP新客</span>
                </div>
            </div>
        </li>
        <li class="product-item">
            <div class="product-image">
                <img src="../img/Snipaste_2024-07-08_15-26-48.png" height="142" width="240"/>
                <span class="badge">包邮</span>
            </div>
            <div class="product-info">
                <h3 class="product-title">【整箱24桶】嗨吃家酸辣粉方便粉丝过桥米线泡...</h3>
                <p class="product-description"></p>
                <div class="product-meta">
                    <span class="sales-info">已售5000+ |包邮到家|</span>
                    <span class="rating">4.4分</span>
                </div>
                <div class="product-price">
                    <span class="current-price">¥10</span>
                    <s class="original-price">25</s>
                    <span class="price-tag">APP新客</span>
                </div>
            </div>
        </li>
        <li class="product-item">
            <div class="product-image">
                <img src="../img/Snipaste_2024-07-08_15-27-28.png" height="173" width="294"/>
                <span class="badge">到店吃</span>
            </div>
            <div class="product-info">
                <h3 class="product-title">招牌隆江猪脚饭隆记</h3>
                <p class="product-description">隆江猪脚饭(昆明永..</p>
                <div class="product-meta">
                    <span class="sales-info">半年售1000+ |</span>
                    <span class="rating">4.6分</span>
                </div>
                <div class="product-price">
                    <span class="current-price">¥0</span>
                    <s class="original-price">4</s>
                    <span class="price-tag">APP新客</span>
                </div>
            </div>
        </li>
        <li class="product-item">
            <div class="product-image">
               <img src="../img/Snipaste_2024-07-08_15-27-40.png" height="208" width="349"/>
                <span class="badge">到店吃</span>
            </div>
            <div class="product-info">
                <h3 class="product-title">2 份中杯珍珠奶茶</h3>
                <p class="product-description">蜜雪冰城(曙光花园店)</p>
                <div class="product-meta">
                    <span class="sales-info">半年售60万+ |</span>
                    <span class="rating">3.5分</span>
                </div>
                <div class="product-price">
                    <span class="current-price">¥10</span>
                    <s class="original-price">24</s>
                    <span class="price-tag">APP新客</span>
                </div>
            </div>
        </li>
        <li class="product-item">
            <div class="product-image">
                <img src="../img/Snipaste_2024-07-08_15-27-52.png" height="138" width="240"/>
                <span class="badge">包邮</span>
            </div>
            <div class="product-info">
                <h3 class="product-title">【110包20款辣味零食大礼包】追剧小零食卤味..</h3>
                <p class="product-description">肉肉来了食品专营店</p>
                <div class="product-meta">
                    <span class="sales-info">已售5000+ |包邮到家</span>
                    <span class="rating">4.5分</span>
                </div>
                <div class="product-price">
                    <span class="current-price">¥7</span>
                    <s class="original-price">25</s>
                    <span class="price-tag">APP新客</span>
                </div>
            </div>
        </li>
        <li class="product-item">
            <div class="product-image">
               <img src="../img/Snipaste_2024-07-08_15-28-02.png" height="142" width="239"/>
                <span class="badge">包邮</span>
            </div>
            <div class="product-info">
                <h3 class="product-title">【整箱160袋】手撕面包早餐全麦奶香软面包10-1...</h3>
                <p class="product-description">合则盛食品专营店</p>
                <div class="product-meta">
                    <span class="sales-info">已售5000+ |包邮到家|</span>
                    <span class="rating">4.4分</span>
                </div>
                <div class="product-price">
                    <span class="current-price">¥0</span>
                    <s class="original-price">4</s>
                    <span class="price-tag">APP新客</span>
                </div>
            </div>
        </li>
    </ul>
<!--    底部菜单部分  -->
    <ul class="footer">
        <li onclick="location.href='index.html'"><img src="../img/Snipaste_2024-07-08_17-23-52.png" height="48" width="50"/>
            <p></p>
        </li>
        <li><img src="../img/Snipaste_2024-07-08_17-54-22.png" height="46" width="50"/>
            <p>视频</p>
        </li>
        <li><img src="../img/Snipaste_2024-07-08_17-53-37.png" height="48" width="54"/>
            <p>消息</p>
        </li>
        <li onclick="location.href='orderlist.html'"><img src="../img/Snipaste_2024-07-09_10-30-24.png" height="53" width="54"/>
            <p>订单</p>
        </li>
        <li onclick="location.href='login.html'"><img src="../img/Snipaste_2024-07-08_17-41-31.png" height="36" width="44"/>
            <p> 我的</p>
        </li>
    </ul>
</div>
</body>
</html>